<script>
  import { moment } from 'istrong-timeutil';
  import { get } from 'istrong-axiosmodel';
  import { orderBy } from 'lodash';
  import { vList } from 'istrong-mvue-common-ui';
  import renderChart from '../../libs/chart/flowChart';

  export default {
    name: 'flowChart',
    data() {
      return {
        id: '',
        name: '',
        beginTime: moment(),
        endTime: moment(),
        chartData: { data: [] },
        listData: [],
        listField: [
          {
            fieldLabel: '时间',
            fieldName: 'time',
            fieldType: 'Date',
            format: 'MM-DD HH时',
            headerClass: 'chartViewer-FlowList-Header-Time',
            contentClass: 'chartViewer-FlowList-Content-Time'
          },
          {
            fieldLabel: '水位<span class="listViewer-header-unit">(m)</span>',
            fieldName: 'val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'chartViewer-FlowList-Header-Water',
            contentClass: 'chartViewer-FlowList-Content-Water'
          },
          {
            fieldLabel: '入库<span class="listViewer-header-unit">(m³/s)</span>',
            fieldName: 'in_val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'chartViewer-FlowList-Header-Val',
            contentClass: 'chartViewer-FlowList-Content-Val'
          },
          {
            fieldLabel: '出库<span class="listViewer-header-unit">(m³/s)</span>',
            fieldName: 'out_val',
            fieldType: 'Number',
            fixed: 2,
            defaultLabel: '-',
            headerClass: 'chartViewer-FlowList-Header-Val',
            contentClass: 'chartViewer-FlowList-Content-Val'
          }
        ]
      }
    },
    components: {
      'vc-List': vList
    },
    methods: {
      getChartData() {
        get('flow.details', {
          flowDetails: {
            id: this.id,
            time: ['[', moment(this.beginTime).format('YYYY-MM-DDTHH:mm:00'), ',', moment(this.endTime).format('YYYY-MM-DDTHH:mm:00'), ']'].join('')
          }
        }).then(result => {
          let data = result.data.length > 0 ? result.data[0] : {
            data: []
          };
          this.listData = orderBy(data.data, ['time'], ['desc']);
          this.chartData = data;

          this.redrawChart();
        });
      },
      redrawChart() {
        renderChart(this._chart, 'chartViewer-FlowChart', this.chartData, this.beginTime, this.endTime)
      },
      routerToMap() {
        this.$router.push({
          name: 'flow/main',
          params: {
            showType: 'map',
            id: this.id
          }
        });
      }
    },
    computed: {
      header_BeginTime: function () {
        return moment(this.beginTime).format('DD日HH时mm分');
      },
      header_EndTime: function () {
        return moment(this.endTime).format('DD日HH时mm分');
      },
      currentVal: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' :
          (data[data.length - 1].val === undefined ? '-' : data[data.length - 1].val.toFixed(2));
      },
      currentOutVal: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' :
          (data[data.length - 1].out_val === undefined ? '-' : data[data.length - 1].out_val.toFixed(2));
      },
      currentInVal: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' :
          (data[data.length - 1].in_val === undefined ? '-' : data[data.length - 1].in_val.toFixed(2));
      },
      currentDataTime: function () {
        let data = this.chartData.data;
        return data.length === 0 ? '' : moment(data[data.length - 1].time).format('YYYY-MM-DD HH时');
      }
    },
    mounted() {
    },
    created() {
    },
    beforeDestroy() {
    },
    beforeRouteEnter(to, from, next) {
      let { id, name, beginTime, endTime } = to.query;
      next(vm => {
        // 通过 `vm` 访问组件实例
        vm.id = id;
        vm.name = name;
        vm.beginTime = beginTime;
        vm.endTime = endTime;
        vm.getChartData();
      });
    }
  }
</script>
<template>
  <div id="chartViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">{{header_BeginTime}} 至 {{header_EndTime}}</div>
      <div class="btChangeRouterMap" v-on:click="routerToMap">
        <span class="ion-ios-location"></span>
      </div>
    </div>
    <div class="div-chart-hr"></div>
    <div class="chartViewer-Chart-Page">
      <div class="chartViewer-Chart">
        <div class="chartViewer-Chart-Name">{{name}}</div>
        <div class="chartViewer-Chart-Legend">
          <div>
            <div class="legend-hr">
              <hr color="#5399d7">
              <div class="legend-hr-flow-val"></div>
            </div>
            <div class="legend_text">正常水位</div>
          </div>
          <div>
            <div class="legend-hr">
              <hr color="#FFC605">
              <div class="legend-hr-flow-inval"></div>
            </div>
            <div class="legend_text">入库流量</div>
          </div>
          <div>
            <div class="legend-hr">
              <hr color="#46aa37">
              <div class="legend-hr-flow-outval"></div>
            </div>
            <div class="legend_text">出库流量</div>
          </div>
        </div>
        <div id="chartViewer-FlowChart"></div>
        <div class="chartViewer-ChartTip">
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>最新水位:</span>
              <span>{{currentVal}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>入库流量:</span><span>{{currentInVal}}</span>
            </div>
          </div>
          <div>
            <div class="chartViewer-ChartTip-Left">
              <span>出库流量:</span>
              <span>{{currentOutVal}}</span>
            </div>
            <div class="chartViewer-ChartTip-Right">
              <span>时　　间:</span><span>{{currentDataTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="div-chart-hr"></div>
      <div class="chartViewer-FlowList">
        <vc-List :data="listData" :fields="listField" class="chartViewer-List"></vc-List>
      </div>
    </div>
  </div>
</template>
<style>
.legend-hr-flow-val{
  background-color: #5399d7;
}
.legend-hr-flow-inval{
  background-color: #FFC605;
}
.legend-hr-flow-outval{
  background-color: #46aa37;
}
#chartViewer-FlowChart{
  width: 100%;
  height: 210px;
  background-color: #fff;
}
.chartViewer-FlowList{
  width: 100%;
  font-size: 14px;
}
.chartViewer-FlowList>div{
  margin: 0px 15px;
}

.chartViewer-FlowList-Header-Time,.chartViewer-FlowList-Content-Time{
  text-align: left;
  width: 26%;
  min-width: 78px;
  white-space: nowrap;
}

.chartViewer-FlowList-Header-Water,.chartViewer-FlowList-Content-Water{
  text-align: right;
  white-space: nowrap;
  margin-right: 3px;
  min-width: 60px;
  width: 18%;
}
.chartViewer-FlowList-Header-Val,.chartViewer-FlowList-Content-Val{
  text-align: right;
  white-space: nowrap;
  min-width: 75px;
  width: 28%;
}
@media all {
  .chartViewer-FlowList-Header-Time,.chartViewer-FlowList-Content-Time{
    width: 24%;
  }
  .chartViewer-FlowList-Header-Water,.chartViewer-FlowList-Content-Water{
    min-width: 80px;
    width: 24%;
  }
  .chartViewer-FlowList-Header-Val,.chartViewer-FlowList-Content-Val{
    min-width: 85px;
    width: 26%;
  }
}
@media (max-width: 320px) {
  .chartViewer-FlowList-Header-Time,.chartViewer-FlowList-Content-Time{
    width: 26%;
  }
  .chartViewer-FlowList-Header-Water,.chartViewer-FlowList-Content-Water{
    min-width: 60px;
    width: 18%;
  }
  .chartViewer-FlowList-Header-Val,.chartViewer-FlowList-Content-Val{
    min-width: 75px;
    width: 28%;
  }
}

</style>